﻿// 课程 主页
// 该页面总的逻辑思路：用户不同功能不同  共家长端和学生端
// 相同点：
// 两端：页面进来默认选择课时按钮（此按钮是表示选择整个课程），没有check选择框；点击选择课时，切换成全选按钮，课时前面出现check选择框可以单个点击某课时；
// 不同点：
// 家长端：点击“您的孩子想要一门课程”进到页面，要回填，（孩子要的课时被勾选），出现全选按钮
// 学生端：始终都是默认选择课时 没有回填
// 注意点：
// check选择框只有符合可以购买条件(userAllCanBuy)的课时才有
import React from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    Image,
    Text,
    AsyncStorage,
    TouchableOpacity,
    TouchableWithoutFeedback,
    BackHandler
} from 'react-native';
import CheckBox from '../utils/react-native-check-box';
import Loading from '../common/Loading'
import NavigatorBar from '../common/NavigationBar';
import BottomBarLimit from '../common/BottomBarLimit';
import BuyedCommon from '../component/BuyedCommon.js';
import Tab from '../component/Tab'
import { getCourseById, letParentEnroll, listParents } from '../api/my';
import BaseBridge from '../common/Native/BaseBridge';
import {setHW,setSpText} from '../component/ScreenUtil'
import { Toast } from 'teaset';
var that;
export default class DetailLesson extends React.Component {
    constructor(props) {
        super(props);
        this.params = props.navigation.state.params ? props.navigation.state.params: {'courseId': global.ECourseConstant.map["entryCourseId"]};
        that=this;
        this.state = {
            loading: true,
            tabList: [
                {
                    tabText: '课程目录',
                    tabName: 'CoursePeriods',
                },
                {
                    tabText: '课程简介',
                    tabName: 'CourseIntroduction',
                },
                {
                    tabText: '老师介绍',
                    tabName: 'TeaIntroduction',
                }
            ],
            parentListId: [],//家长id数组
            showFootTab:true,//一定默认true 可以展示底部付款的tab
            showFootBuyStatus: false,//tab下 符合展示的条件是 有可以购买的就展示购买
            isShowAllCheckbox:false,//是否显示全选的复选框 true时才显示 课程目录里面的勾选框也随着都展示
            CoursePeriodsList: {},//课程目录
            isRefreshing: false,
            isLoading: false,
            LessonsMore: false,
            isAllChecked: false,//底部的勾默认不勾选（保证在展示全选按钮条件下的全选时为true）
            hasChooseKeShi:true,//用户是否有勾选要买的课时 默认有 （选择课时时true，全选按钮&&有勾选时true）
            userAllCanBuy:[],//家长或者学生（当前用户）-->  符合可以购买条件的课时（前面可以有复选框的）
        }
    }
   // 点击tab时，重新调接口|| 刷新数据（从课时页面返回时）
    reSearch() {
        this.clearData();
        this.listParentsAndreSearch();
    }
    // 初始化render之后执行
    componentDidMount() {
       this.reSearch();
       BackHandler.addEventListener('hardwareBackPress', that.handleBack);
    }
    handleBack() {
        if(that.props&&that.props.navigation&&that.props.navigation.state&&that.props.navigation.state.params&&that.props.navigation.state.params["fromPaySucess"]){
            //如果是支付成功页过来的
            that.props.navigation.navigate('HomePage');
            BackHandler.removeEventListener('hardwareBackPress', that.handleBack)
            return true;
        }else{
            that.goBack();
            return true;
        }
    }
    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', that.handleBack)
    }
    //第二次进来走这里
    componentWillReceiveProps(curProps) {
        global.log("第二次进来该课程目录页面，页面重新刷新")
        if(curProps&&curProps.navigation&&curProps.navigation.state&&curProps.navigation.state.params)
        {
            this.params = curProps.navigation.state.params;
        }
        this.reSearch();
    }
    clearData(){//清空数据/缓存
        this.setState({
            loading:true,
            courseId:this.params.courseId,
            parentListId: [],//家长id数组
            showFootTab:true,//一定默认true 可以展示底部付款的tab
            showFootBuyStatus: false,//tab下 符合展示的条件是 有可以购买的就展示购买
            isShowAllCheckbox:false,//是否显示全选的复选框 true时才显示 课程目录里面的勾选框也随着都展示
            CoursePeriodsList: {},//课程目录
            isRefreshing: false,
            isLoading: false,
            LessonsMore: false,
            isAllChecked: false,//底部的勾默认不勾选（保证在展示全选按钮条件下的全选时为true）
            hasChooseKeShi:true,//用户是否有勾选要买的课时 默认有 （选择课时时true，全选按钮&&有勾选时true）
            userAllCanBuy:[],//家长或者学生（当前用户）-->  符合可以购买条件的课时（前面可以有复选框的）
        });
    }
    listParentsAndreSearch(){
        let obj = {
            STUDENTID: global.ECourseConstant.userInfo.studentId
        }
        listParents(obj).then((res) => {
            this.setState({ parentListId: res });//获取家长id数组
            this._getCourseById()//课程目录的列表
        });
    }
    _getCourseById() {//课程目录的列课程简介信息也在里从里面取字段 调老师介绍的接口
        var  json = {
            "ID": this.params.courseId,
            "CREATOR": global.ECourseConstant.userInfo.uuid,//用户id
            "LISTPARENTIDS": this.state.parentListId,//家长id数组
        }
        getCourseById(json).then(res => {
            global.log(res, '-----课程目录接口-----')
            // 家长进来的回填 勾选孩子让买的(判断勾选的操作)
            let courseId=res.ID;
            let userType = global.ECourseConstant.userInfo.loginType;//当前进入的角色
            let entryCourseId=global.ECourseConstant.map["entryCourseId"]||"";//孩子期望买的课程 是一个字符串
            let childCheckedArr=global.ECourseConstant.map["entryLessonIds"]?(global.ECourseConstant.map["entryLessonIds"]).split(','):[];//孩子期望家长买的某课程的课时
            let AllCanPay=[];//所有可以购买的课时
            this.getUserAllCanBuy(res,userType,AllCanPay)//根据userType区分家长端和学生端不同操作，获取当前端所有可以购买条件的数组
            // 进入下面的if条件前，要先清空上次该if对某些状态的操作的结果，就是要先进行清缓存，还原的操作
            this.setState({
                isShowAllCheckbox:false,
                showFootBuyStatus: false,
            })
            // 进入回填的条件（家长端&&孩子选中的当前课程）
            if (userType == '1' || userType == '3') {//家长进来
                if(entryCourseId&&(courseId==entryCourseId)&&(childCheckedArr&&childCheckedArr.length)){//是孩子购买的课程
                    let checkArr=[];//回填被勾选的课时
                    if (AllCanPay.length) {
                        AllCanPay.forEach((item)=>{
                            childCheckedArr.forEach((elem)=>{
                                if(elem==item.ID&&item.ISBUY=='0'&&item.IS_FREE=='0'){//找到该课时 ||课时没有购买||收费的
                                    item.isChecked=true;//都勾选上
                                    checkArr.push(item)
                                }
                                if(item.IS_FREE=='1'||(item.IS_FREE=='0'&&item.ISBUY=='1')){//免费||已经购买了（家长购买后第二次进入页面的还原数据）
                                    if(typeof item.isChecked!=='undefined'){//先还原数据 没有isChecked属性
                                        delete item.isChecked
                                    }
                                }
                            })
                        })
                        //如果 回填的 符合购买数组 就展示全选按钮 不然就是默认的选择课时按钮
                        checkArr.length?this.setState({isShowAllCheckbox:true}):this.setState({isShowAllCheckbox:false})
                    }
                    //是否是回填勾上全选按钮
                    checkArr.length==AllCanPay.length?this.setState({isAllChecked:true}):this.setState({isAllChecked:false})
                }
            }
            this.setState({loading: false,CoursePeriodsList: res});
            // 展示底部购买条件（判断展示底部的操作）
            if(res.IS_FREE=='0'&&this.state.userAllCanBuy.length){//该课程收费 并且收费的课时里面存在未购买//存在可以买的课时
                this.setState({showFootBuyStatus:true})
            }
        })
    }
    // 获取用户符合购买的课时数组
    getUserAllCanBuy(res,userType,AllCanPay){
        res.LISTCOURSEPART.forEach((item)=>{
            item.introIsOpen=false;//简介是否展开默认不展开
            if(typeof item.isChecked!=='undefined'){//先还原数据 没有isChecked属性
                delete item.isChecked
            }
            if(userType == '1' || userType == '3'){//家长
                if(item.ISBUY == '0' && item.IS_FREE == '0'){//未购买&&收费
                    item.isChecked=false;//默认是false不勾
                    AllCanPay.push(item)
                }
            }else{//学生
                if(item.IS_FREE=='0'){//收费
                    if(item.ISBUY == '0'&&item.ISENROLL!='1'){//没有购买&&没有报名
                        item.isChecked=false;
                        AllCanPay.push(item)
                    }
                }
            }
        })
        this.setState({userAllCanBuy:AllCanPay})
    }
    // 可以展示付钱的tab
    showFootBuyFun(flag){
        this.setState({showFootTab:flag})
    }
    render() {
        return (
            <View style={{ backgroundColor: '#F7F7F9', flex: 1 }}>
                <NavigatorBar
                    style={styles.navigatorBar}
                    title={'课程详情'}
                    leftButton={this.renderLeftButton(require('../assets/imgs/back.png'))}
                />
                {this.state.loading ? <Loading /> :
                    <View style={styles.courseBox}>
                        <ScrollView showsVerticalScrollIndicator={false}>
                            <BuyedCommon
                                headerInfor={this.state.CoursePeriodsList}
                                ResetSearch={(name) => this.reSearch(name)}
                                {...this.props}/>
                            <Tab tabList={this.state.tabList}
                                courseId={this.params.courseId}
                                isShowAllCheckbox={this.state.isShowAllCheckbox}
                                showFootBuyFun={(flag) => this.showFootBuyFun(flag)}
                                headerInfor={this.state.CoursePeriodsList}
                                CoursePeriodsList={this.state.CoursePeriodsList}
                                ResetSearch={(name) => this.reSearch(name)}
                                isAllChecked={(flag)=>this.allCheckedHandle(flag)}
                                hasChooseKeShi={(flag)=>this.hasChooseKeShi(flag)}
                                tellParentTabName={(tabName) => { this.tellParentTabName(tabName)}}
                                {...this.props}>
                            </Tab>
                           <BottomBarLimit />
                        </ScrollView>
                    </View>
                }
                {this.state.loading?null:this.showFootBuy(this.state.CoursePeriodsList.LISTCOURSEPART)}
            </View>
        );
    }
    tellParentTabName(tabName) {
        this.selectTabName = tabName;
    }
    // 控制底部 是否全状
    allCheckedHandle = (flag) => {
        this.setState({
            isAllChecked: flag
        })
    }
    // 是否有勾选要买的课时 默认有true
    hasChooseKeShi = (flag) => {
        this.setState({
            hasChooseKeShi: flag
        })
    }
    // 点击底部全取消全选时
    renderCheckAllBox() {
        if(this.state.isShowAllCheckbox){
            return (
                <CheckBox
                    style={{ flex: 1, padding: 10 }}
                    onClick={() => this.onClick()}
                    isChecked={this.state.isAllChecked}
                    checkedImage={<Image style={{ width: 16, height: 16 }} source={require('../assets/imgs/selectActive.png')}
                    />}
                    unCheckedImage={<Image style={{ width: 16, height: 16 }} source={require('../assets/imgs/unselect.png')}
                    />}
                />);
        }else{
            return null
        }
    }
    // 点全选按钮选择课时 
    onClick() {
        this.state.isAllChecked = !this.state.isAllChecked;
        let flag=this.state.isAllChecked;
        this.state.userAllCanBuy.forEach((item) => {
            item.isChecked = flag;
        });
        //控制报名按钮的禁用状态和每个课时状态更新
        this.setState({
            hasChooseKeShi: flag, 
            CoursePeriodsList: this.state.CoursePeriodsList
        })
    }
    // 学生端：学生通知家长 去报
    _letParentEnroll() {
        if(this.state.parentListId.length){//有家长
            this.setState({ loading: true });
            let COURSEPARTID = [];//课时idlist
            if(this.state.isShowAllCheckbox&&!this.state.isAllChecked){//展示全选按钮&& 部分勾选
                this.state.userAllCanBuy.forEach(item => {
                    if (item.isChecked) {//勾选的 没买过的 收费的 未报过名的
                        COURSEPARTID.push(item.ID)//课时id
                    }
                })
            }else{//都是全选 1：展示选择课时的状态 2：展示全选按钮 并全部勾选的时候
                this.state.userAllCanBuy.forEach(item => {
                    COURSEPARTID.push(item.ID)//课时id
                })
            }
            let json = {
                "COURSEID": this.params.courseId,//课程id
                "COURSEPARTID": COURSEPARTID,// 课时idlist
                "LISTPARENTIDS": this.state.parentListId,//家长idlist app
                "COURSETYPE": "0",//课程类型 0课程 1课时
                "STUDENTID": global.ECourseConstant.userInfo.studentId//学生id app
            }
            letParentEnroll(json).then(res => {
                this.setState({ loading: false });
                this.reSearch();
            }).catch(res=>{
                this.setState({ loading: false });
            })
        }else{
            Toast.message("您还没有绑定家长")
        }
    }
    // 家长端：家长报名 全不全选时
    btnParentSubmit() {
        let payCourseInfo = {
            BASICINFO: {},
            LISTCOURSE: [],//课时信息（非全选时）
            toPage: 'DetailLesson',
        }
        let totleMoney=0;
        payCourseInfo.BASICINFO.COURSE_NAME = this.state.CoursePeriodsList.COURSE_NAME//课程名字
        payCourseInfo.BASICINFO.STOP_TIME = this.state.CoursePeriodsList.STOP_TIME//课程截止时间
        payCourseInfo.BASICINFO.TEACHER_NAME = this.state.CoursePeriodsList.USERNAME//老师名字
        payCourseInfo.BASICINFO.COURSE_ID = this.state.CoursePeriodsList.ID//课程id
        if(this.state.isShowAllCheckbox&&!this.state.isAllChecked){//展示全选按钮&& 部分勾选
            this.state.userAllCanBuy.forEach(item => {
                if(item.isChecked){//有isChecked字段的 并true的
                    let obj = {
                        "COURSE_TYPE": "1",//0 是课程 1是课时
                        "COURSE_ID": item.ID,//每个课时id
                        "MONEY": item.MONEY,//每个课时价格
                        "COURSE_NAME": item.TITLE//每个课时名字
                    }
                    payCourseInfo.LISTCOURSE.push(obj)
                    totleMoney = totleMoney + Number(item.MONEY);
                }
            })
            totleMoney=totleMoney+'.00'
        }else{//全选情况 
             // 1：展示选择课时的状态 2：展示全选按钮 并全部勾选的时候
             // 以上两个全选时  要判断是不是购买的整个课程（才是真的全选）
             let NoFreeArr=[]
             this.state.CoursePeriodsList.LISTCOURSEPART.forEach(item=>{
                 if(item.IS_FREE=='0'){//不免费 的课程
                     NoFreeArr.push(item)
                 }
             })
             if(NoFreeArr.length==this.state.userAllCanBuy.length){//真的全选
                let obj = {
                    "COURSE_TYPE": "0",//0 是课程
                    "COURSE_ID": this.state.CoursePeriodsList.ID,//课程id
                    "MONEY": this.state.CoursePeriodsList.MONEY,//课程总价格
                    "COURSE_NAME": this.state.CoursePeriodsList.COURSE_NAME//课程名字
                }
                payCourseInfo.LISTCOURSE.push(obj)
                totleMoney=this.state.CoursePeriodsList.MONEY;
             }else{//假的全选->部分勾选 
                if(!this.state.isShowAllCheckbox){//选择课时
                    this.state.userAllCanBuy.forEach(item => {
                        let obj = {
                            "COURSE_TYPE": "1",//0 是课程 1是课时
                            "COURSE_ID": item.ID,//每个课时id
                            "MONEY": item.MONEY,//每个课时价格
                            "COURSE_NAME": item.TITLE//每个课时名字
                        }
                        payCourseInfo.LISTCOURSE.push(obj)
                        totleMoney = totleMoney + Number(item.MONEY);
                    })
                }else{
                    this.state.userAllCanBuy.forEach(item => {
                        if(item.isChecked){//有isChecked字段的 并true的
                            let obj = {
                                "COURSE_TYPE": "1",//0 是课程 1是课时
                                "COURSE_ID": item.ID,//每个课时id
                                "MONEY": item.MONEY,//每个课时价格
                                "COURSE_NAME": item.TITLE//每个课时名字
                            }
                            payCourseInfo.LISTCOURSE.push(obj)
                            totleMoney = totleMoney + Number(item.MONEY);
                        }
                    })
                }
                totleMoney=totleMoney+'.00'
             }
        }
        payCourseInfo.BASICINFO.TOTLE_MONEY = totleMoney;//支付的总价格
        AsyncStorage.setItem('payCourseInfo', JSON.stringify(payCourseInfo));
        this.props.navigation.navigate("PayScreen");
   }
    // 在可以展示的tab && 符合存在收费&&没购买的课时情况下
    showFootBuy(list) {
        if (this.state.showFootTab&&this.state.showFootBuyStatus) {
            if (list && list.length) {
                return (
                    <View style={styles.barBottom}>
                        <View style={styles.selectLessonsWrapper}>
                            <View style={styles.checkAllBox}>
                                {this.renderCheckAllBox()}
                            </View>
                            {this.isShowAllCheckboxFun()}
                        </View>
                        <View style={styles.pricePay}>
                            <View style={styles.priceWrapper}>
                                <Text style={styles.priceDiscountText}>原价:</Text>
                                {this.getPayMoney(this.state.CoursePeriodsList)}
                            </View>
                            {this.btnStatus()}
                        </View>
                    </View>
                )
            }
        }
    }
    // 点击 选择课时按钮时
    ChooseKeShi(){
        this.setState({
            isShowAllCheckbox: true,
            hasChooseKeShi:false//报名按钮禁用
        })
    }
    isShowAllCheckboxFun(){
        if(this.state.isShowAllCheckbox){
            return(
                <TouchableWithoutFeedback onPress={() => this.onClick()}>
                    <View><Text style={styles.selectLessons}>全选</Text></View>
                </TouchableWithoutFeedback>
            )
        }else{
            return(
                <TouchableWithoutFeedback onPress={()=> this.ChooseKeShi()}>
                    <View><Text style={styles.selectLessons}>选择课时</Text></View>
                </TouchableWithoutFeedback>
            )
        }
    }
    // 按钮的显示状
    btnStatus() {
            // 1 3 都是家长  4是学生 如果去掉全部的勾选则 让家长报名按钮置灰
            let userType = global.ECourseConstant.userInfo.loginType;
            if (userType == '4') {//学生
               return (
                    <View style={[styles.stylepayLessons,this.state.hasChooseKeShi?{}:styles.buttonTextDisable]}>
                        {this.state.hasChooseKeShi?
                        <Text style={styles.buttonText} onPress={() => this._letParentEnroll()}>让家长报名</Text>:
                        <Text style={[styles.buttonText,styles.buttonTextDisable]}>让家长报名</Text>
                        }
                    </View>
               )
            }
            if (userType == '1' || userType == '3') {//家长
                return (
                    <View style={[styles.stylepayLessons,this.state.hasChooseKeShi?{}:styles.buttonTextDisable]}>
                        {this.state.hasChooseKeShi?
                        <Text style={styles.buttonText} onPress={() => this.btnParentSubmit()}>立即报名</Text>:
                        <Text style={[styles.buttonText,styles.buttonTextDisable]}>立即报名</Text>
                        }
                    </View>
                )
            }
    }
    // 要支付的价钱  这里已经是是有展示底部购买栏了的前提下了
    getPayMoney() {
        let totleMoney=0;
        if(this.state.isShowAllCheckbox){//展示全选按钮时
            this.state.userAllCanBuy.forEach((item) => {
                if(item.isChecked){//有ischeck字段的 是true的
                    totleMoney = totleMoney + Number(item.MONEY);
                }
            });
        }else{//选择课时时 是全选
            this.state.userAllCanBuy.forEach((item) => {
                totleMoney = totleMoney + Number(item.MONEY);
            });
        }
        return (
            <View style={styles.priceNumber}>
                <Text style={styles.numPrifix}>¥</Text>
                <Text style={styles.number}>{totleMoney}.00</Text>
            </View>
        )
    }
    // 渲染按钮 返回按钮
    renderLeftButton(image) {
        var that=this;
        return <TouchableOpacity
            style={[global.CommonStyleSheet.NavLeftButton]}
            onPress={()=>{that.goBack()}}>
            <Image style={{ width: 34, height: 34 }} source={image}/>
        </TouchableOpacity>;
    }
    goBack() {
        if(that.props&&that.props.navigation&&that.props.navigation.state&&that.props.navigation.state.params&&that.props.navigation.state.params["fromPaySucess"])
        {
            //如果是支付成功页过来的
            that.props.navigation.navigate('HomePage');
            return;
        }
        let params = this.props.navigation.state.params;
        if(global.ECourseConstant.eCourseFirstRouter=="DetailLesson"){
            BaseBridge.backToExue();
        }else{
            params&&params.refreshPage&&params.refreshPage();//调用返回上一个页面的refreshPage()
            this.props.navigation.goBack();//pop就会返回上一个页面)
        }
    }
}
const styles = StyleSheet.create({
    courseContainer:{
        flex: 1,
        backgroundColor: '#F7F7F9'
    },
    // 底部付款tips
    barBottom: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        height: setHW(100),
        flexDirection: 'row',
        backgroundColor: '#fff',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingLeft: 0,
        shadowColor: '#000000',
        shadowRadius: setHW(14),
        shadowOpacity: 0.1,
    },
    // 全选box
    selectLessonsWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    // 全选按钮
    checkAllBox: {
        marginTop: setHW(15),
        width:setHW(70),
    },
    // 全选文本
    selectLessons: {
        fontSize: setSpText(28),
        color: '#3977B3',
    },
    //原价box
    priceWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: setHW(20),
    },
    // 原价两个字
    priceDiscountText: {
        fontSize: setSpText(28),
        color: '#FF9920',
        marginRight:setHW(10),
    },
    // 价钱
    priceNumber: {
        flexDirection: 'row',
    },
    numPrifix: {
        paddingTop: setHW(12),
        color: '#FF9920',
        fontSize: setSpText(24),
    },
    number: {
        fontSize: setSpText(36),
        color: '#FF9920',
        fontWeight: 'bold'
    },
    pricePay: {
        flexDirection: 'row'
    },
    stylepayLessons: {
        width: setHW(276),
        height: setHW(100),
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FF9920',
    },
    buttonTextDisable: {
        opacity: 0.5,
    },
    buttonText: {
        color: '#fff',
        fontSize: setSpText(36),
    },
})
